{{! Picture panels (ADR 0119): tall pictures side by side; the open one is wide and shows its words. Which one is open is a radio button per panel (the checked one, else the first: CSS, also on the canvas and without scripts) lying over the panel, named by its title; the words lie above it, so they stay editable. view.js opens a panel the mouse rests on (When pointed at). The button is the Button element's. }}
<div {{@attrs}}>{{#head}}<div class="sv-sectionhead sv-picture-panels__head{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}">{{#eyebrow}}<p class="sv-picture-panels__eyebrow"{{@edit eyebrow}}>{{eyebrow}}</p>{{/eyebrow}}{{#heading}}<h2 class="sv-sectionhead__title"{{@edit heading}}>{{{heading}}}</h2>{{/heading}}{{#intro}}<p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p>{{/intro}}</div>{{/head}}<div class="sv-picture-panels__row">{{#items}}<div class="sv-picture-panels__panel"><input class="sv-picture-panels__radio" type="radio" name="sv-{{@id}}-panel" aria-labelledby="sv-{{@id}}-{{id}}">{{#picture.url}}<img class="sv-picture-panels__img wp-image-{{picture.id}}" src="{{picture.url}}" alt="{{picture.alt}}"{{#picture.width}} width="{{picture.width}}" height="{{picture.height}}"{{/picture.width}} loading="lazy" decoding="async">{{/picture.url}}{{^picture.url}}{{@placeholder items.picture}}{{/picture.url}}{{#narrowTitles}}<span class="sv-picture-panels__narrow" aria-hidden="true">{{{title}}}</span>{{/narrowTitles}}{{#narrowNumbers}}<span class="sv-picture-panels__narrow sv-picture-panels__number" aria-hidden="true"></span>{{/narrowNumbers}}<div class="sv-picture-panels__words"><h3 class="sv-picture-panels__title" id="sv-{{@id}}-{{id}}"{{@edit items.title}}>{{{title}}}</h3>{{#text}}<p class="sv-picture-panels__text"{{@edit items.text}}>{{text}}</p>{{/text}}{{#button.label}}<div class="sv-picture-panels__action"><div class="sv-button sv-button--variant-{{buttonVariant}} sv-button--size-{{buttonSize}}">{{#button.link.url}}<a class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}" href="{{button.link.url}}"{{#button.link.newTab}} target="_blank" rel="noopener noreferrer"{{/button.link.newTab}}>{{button.label}}</a>{{/button.link.url}}{{^button.link.url}}<span class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}">{{button.label}}</span>{{/button.link.url}}</div></div>{{/button.label}}</div></div>{{/items}}</div></div>